<html>
<head>
    <title>智能图书平台</title>
    <meta charset="UTF-8">
    <style>
    * {
        box-sizing: border-box;
        font-family: Arial, sans-serif;
    }

    body {
    	background-size: cover;
        background-color: #f0f2f5;
        margin: 0;
        padding: 0;
    }

    .book-container {
    	   background-size: cover;
        max-width: 1200px;
        margin: 5% auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    a {
        text-decoration: none;
        color: #007bff;
    }

    a:hover {
        text-decoration: underline;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
    }

    th {
        background-color: #f0f2f5;
    }

    button {
        padding: 5px 10px;
        background-color: #dc3545;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    button:hover {
        background-color: #c82333;
    }

    form {
        display: inline;
    }


    .edit-btn {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin-right: 10px;
    }

    .edit-btn:hover {
        background-color: #0056b3;
    }

    .add-book {
        display: inline-block;
        padding: 5px 10px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .add-book:hover {
        background-color: #218838;
    }

    .admin-info {
        text-align: left;
    }
    .center-text {
            position: fixed;
            bottom: 15px; /* 根据需要调整 */
    	   	 left: 50%;
    	 	 transform: translate(-50%, 50%);
   	 	 color: black;
    	 	 font-size: 15px;
	  }
	td {
    max-width: 100px; /* 设置最大宽度，根据需要调整 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    .gl{
     text-align:right
    }

.edit-btn, .delete-form {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px;
  vertical-align: middle;
}

.edit-btn img, .delete-form img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
}

button[type="submit"] {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0069d9;
}
nav button {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 5px;


}

nav button:hover {
  background-color: #0069d9;
}
.search-form {
        display: inline-block;
        margin-right: 10px;
    }
nav span {
  background-color: #f0f2f5;
  color: #333;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 5px;
}

nav {
  text-align: right;
}

    </style>
    <script src="{{url_for('static',filename='jquery.js')}}"></script>
    <link href="{{url_for('static',filename='bootstrap.min.css')}}" rel="stylesheet">
</head>
<body>

<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->

  <form action="{{ url_for('search_book', book_name=book_name) }}" method="post" class="search-form">
        <input type="text" name="book_name" id="book_name" placeholder="无书籍">
        <button type="submit">查找图书</button>
    </form>
    <form action="{{ url_for('search_user') }}" method="post" class="search-form">
        <input type="text" name="user_name" id="user_name" placeholder="无用户">
        <button type="submit">查找用户借阅</button>
    </form>


        <table class="table table-hover table-striped table-bordered" style="margin-top: 10px">
            <thead>
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>状态</th>
                <th>用户</th>
                <th>电话</th>
                <th>借阅时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for book in books %}
            <tr>
                <td>{{ book.title }}</td>
                <td>{{ book.author }}</td>
                <td>{{ book.state }}</td>
                <td>{{ book.state_user }}</td>
                <td>{{ book.user_phone }}</td>
                <td>{{ book.state_time}}</td>
                <td>
                    <button type="button" class="edit-btn" onclick="window.location.href='/edit/{{book.id}}'">
                       <img src="/static/006.jpg" alt="Edit">
                    </button>
               <form action="{{ url_for('delete_book', id=book.id) }}" method="post" class="delete-form">
                   <button type="submit">
               <img src="/static/007.jpg" alt="Delete">
             </button>
</form>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <div>
                {% if page_num > 1 %}
                <button onclick="window.location.href='{{ url_for('index2', page_num=page_num-1) }}'">上一页</button>
                {% endif %}
                {% for i in range(1, (total//per_page)+2) %}
                {% if i == page_num %}
                <span>{{ i }}</span>
                {% else %}
                <button onclick="window.location.href='{{ url_for('index2', page_num=i) }}'">{{ i }}</button>
                {% endif %}
                {% endfor %}
                {% if page_num < (total//per_page)+1 %}
                <button onclick="window.location.href='{{ url_for('index2', page_num=page_num+1) }}'">下一页</button>
                {% endif %}
            </div>
        </nav>
</div>
</body>
</html>